<template>
    <div>
        <el-form :inline="true" :model="searchData" style="display: flex; align-items: center;"
            class="demo-form-inline">
            <el-form-item label="承运商编号:">
                <el-input v-model="searchData.CarrierCode" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="承运商名称:">
                <el-input v-model="searchData.CarrierName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetCarrierManagementDtoAsync()">
                    <i class="el-icon-search">&nbsp;</i>查询
                </el-button>
                &nbsp;&nbsp;
                <el-button @click="reset()"><i class="el-icon-refresh"></i>&nbsp重置</el-button>
                &nbsp;&nbsp;
                <el-button type="success" @click="add()"><i class="el-icon-plus"></i>&nbsp添加</el-button>
                &nbsp;&nbsp;
                <el-button type="danger" @click="BatchDel()"><i class="el-icon-delete"></i>&nbsp批量删除</el-button>
                &nbsp;&nbsp;
                <el-button type="success" plain @click="exportListToExcel(ids)"><i
                        class="el-icon-upload2"></i>&nbsp导出</el-button>
            </el-form-item>
        </el-form>

        <p></p>
        <br>

        <el-table :data="carrierList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column prop="carrierCode" label="承运商编号" align="center">
            </el-table-column>
            <el-table-column prop="carrierName" label="承运商名称" align="center">
            </el-table-column>
            <el-table-column prop="remarks" label="备注" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link type="warning" @click="FilCarrierManagement(scope.row.id)">编辑</el-link>
                    &nbsp;&nbsp;
                    <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <br>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                总共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据，共{{ page.pageCount }}页，当前第{{ page.pageIndex }} /
                {{ page.pageCount }}页
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="slot,jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                </el-pagination>
            </el-form-item>
        </el-form>

        <!-- 添加弹出层表单 -->
        <el-dialog :visible.sync="dialogVisible" title="添加承运商" width="60%">
            <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="承运商编号：" style="width: 300px;">
                    <el-input v-model="info.carrierCode" style="width: 600px;box-align: left;"
                        placeholder="可不填写，自动生成"></el-input>
                </el-form-item>

                <el-form-item label="承运商名称：" prop="carrierName" style="width: 300px;">
                    <el-input v-model="info.carrierName" style="width: 600px;box-align: left;"></el-input>
                </el-form-item>

                <el-form-item label="备注：" prop="remarks" style="width: 300px;">
                    <el-input type="textarea" :rows="4" v-model="info.remarks"
                        style="width: 600px;box-align: left;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="width: 100px; height: 40px; font-size: 16px;"
                    @click="dialogVisible = false">取消</el-button>
                <el-button style="width: 100px; height: 40px; font-size: 16px;" type="primary"
                    @click="save('ruleForm')">添加</el-button>
            </span>
        </el-dialog>

        <!-- 修改弹出层表单 -->
        <el-dialog :visible.sync="dialogVisible1" title="修改承运商" width="60%">
            <el-form :model="infos" :rules="rules1" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="承运商编号：" style="width: 300px;">
                    <el-input v-model="infos.carrierCode" :disabled="true" readonly
                        style="width: 600px;box-align: left;" placeholder="可不填写，自动生成"></el-input>
                </el-form-item>

                <el-form-item label="承运商名称：" prop="carrierName" style="width: 300px;">
                    <el-input v-model="infos.carrierName" style="width: 600px;box-align: left;"></el-input>
                </el-form-item>

                <el-form-item label="备注：" prop="remarks" style="width: 300px;">
                    <el-input type="textarea" :rows="4" v-model="infos.remarks"
                        style="width: 600px;box-align: left;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button style="width: 100px; height: 40px; font-size: 16px;"
                    @click="dialogVisible1 = false">取消</el-button>
                <el-button style="width: 100px; height: 40px; font-size: 16px;" type="primary"
                    @click="upd('ruleForm')">编辑</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { GetCarrierManagementDtoAsync, AddCarrierManagement, DelCarrierManagement, FilCarrierManagementfff, UpdCarrierManagement, BatchCarrierManagement } from "@/api/BasicsDatumServer/CarrierManagement";
import { autoGenerateCode } from "@/utils/utils";
import XLSX from 'xlsx';
export default {
    //数据
    data() {
        return {
            //查询条件
            searchData: {
                CarrierCode: "",
                CarrierName: "",
            },
            //承运商列表
            carrierList: [],
            //分页
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0
            },
            //选中的复选框
            ids: [],
            //获取控件值
            info: {
                carrierCode: "",
                carrierName: "",
                remarks: "",
            },
            infos: {
                id: "",
                carrierCode: "",
                carrierName: "",
                remarks: "",
            },
            dialogVisible: false,
            dialogVisible1: false,
            //添加校验
            rules: {
                carrierName: [
                    { required: true, message: '请输入承运商名称', trigger: 'blur' },
                ],
                remarks: [
                    { required: true, message: '请输入备注', trigger: 'blur' },
                ],
            },
            //修改校验
            rules1: {
                carrierName: [
                    { required: true, message: '请输入承运商名称', trigger: 'blur' },
                ],
                remarks: [
                    { required: true, message: '请输入备注', trigger: 'blur' },
                ],
            },
        }
    },
    //计算属性
    computed: {
        sid() {
            var sid = [];
            this.ids.forEach((item) => {
                sid.push(item.id);
            })
            return sid;
        },
    },
    //方法
    methods: {
        //反填
        FilCarrierManagement(id) {
            this.dialogVisible1 = true;

            let data = {
                id: id
            };

            FilCarrierManagementfff(data).then(res => {
                this.infos.id = res.data.data.id;
                this.infos.carrierCode = res.data.data.carrierCode;
                this.infos.carrierName = res.data.data.carrierName;
                this.infos.remarks = res.data.data.remarks;
            })
        },
        //显示承运商信息
        GetCarrierManagementDtoAsync() {
            let data = {
                carrierCode: this.searchData.CarrierCode,
                carrierName: this.searchData.CarrierName,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };

            GetCarrierManagementDtoAsync(data).then(res => {
                this.carrierList = res.data.data.data;

                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //获取选中的复选框Id
        handleSelectionChange(val) {
            this.ids = val;
        },
        //重置
        reset() {
            //刷新页面
            location.reload();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetCarrierManagementDtoAsync();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetCarrierManagementDtoAsync();
        },
        //跳转到添加页面
        add() {
            this.dialogVisible = true;
        },
        //添加承运商
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    AddCarrierManagement(this.info).then(res => {
                        if (res.data.totalCount > 0) {
                            this.$message.success('添加成功');

                            this.info.carrierName = "";
                            this.info.remarks = "";

                            this.dialogVisible = false;
                            this.GetCarrierManagementDtoAsync();
                        }
                        else {
                            this.$message.error('添加失败');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删除承运商
        del(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Del(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //删除仓库
        Del(id) {
            let data = {
                id: id
            };

            DelCarrierManagement(data).then(res => {
                if (res.data.totalCount > 0) {
                    this.$message.success('删除成功');
                    this.GetCarrierManagementDtoAsync();
                    this.page.pageIndex = 1;
                }
                else {
                    this.$message.error('删除失败');
                }
            })
        },
        //修改承运商
        upd(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    UpdCarrierManagement(this.infos).then(res => {
                        if (res.data.totalCount > 0) {
                            this.$message.success('修改成功');

                            this.dialogVisible1 = false;
                            this.GetCarrierManagementDtoAsync();
                        }
                        else {
                            this.$message.error('修改失败');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //批量删除仓库
        BatchDel() {
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要删除的数据！',
                    type: 'warning'
                });
                return
            }
            var data = {
                delId: this.sid.toString(),
            }
            //console.log(22222, data.delId);

            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                BatchCarrierManagement(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.GetCarrierManagementDtoAsync();
                        this.page.pageIndex == 1;
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "error",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //导出
        exportListToExcel(ids) {
            //验证
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要导出的数据！',
                    type: 'warning'
                });
                return
            }

            // 过滤需要导出的字段
            const aaa = ids.map(item => {
                return {
                    承运商编号: item.carrierCode,
                    承运商名称: item.carrierName,
                    备注: item.remarks,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(aaa);
            //设置表格宽度
            worksheet['!cols'] = [
                { width: 15 },
                { width: 15 },
                { width: 20 },
            ];

            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '乔建伟的承运商管理.xlsx');
        },
    },
    //勾子函数加载数据
    created() {
        this.GetCarrierManagementDtoAsync();

        this.info.carrierCode = autoGenerateCode("CY");
    },
}
</script>

<style></style>